
<template>
    <div class="layout">
        <Layout>
            <Header>
                <Menu mode="horizontal" theme="dark" >
                    <MenuItem class="layout-logo" ><p><svg class="icon" aria-hidden="true"><use xlink:href="#iconfudao"></use></svg>教师管理学生页面</p></MenuItem>
                    <div class="layout-nav">
                         <MenuItem ><svg class="icon" aria-hidden="true"><use xlink:href="#iconlaoshi"></use></svg></MenuItem>
                        <MenuItem >
                            教师工号:
                            {{teacherInfo.teacherId}}
                        </MenuItem>
                        <MenuItem >
                            教师姓名:
                            {{teacherInfo.teacherName}}
                        </MenuItem>
                        <MenuItem >
                            专业:
                            {{teacherInfo.major}}
                        </MenuItem>
                        <MenuItem >
                            课程:
                           {{teacherInfo.project}}
                        </MenuItem>
                          <MenuItem @click.native="loginout">
                           退出
                        </MenuItem>
                    </div>
                </Menu>
            </Header>
            <Layout>
                <Sider hide-trigger :style="{background: '#fff'}">
                    <Menu active-name="1-1" theme="light" width="auto" :open-names="['1']">
                        <Submenu name="1">
                            <template slot="title">
                               <Icon custom="iconfont iconfenshijuan" size="24" />
                                标准考试
                            </template>
                            <MenuItem name="1-1" @click.native="componentId='TeacherSettedquesPage'">我的试卷</MenuItem>
                            <MenuItem name="1-2" @click.native="componentId='StudentExamedMsg'">学生考试成绩</MenuItem>
                            <MenuItem name="1-3" @click.native="componentId='StudentExamedData'">考试情况</MenuItem>
                        </Submenu>
                           <Submenu name="2">
                            <template slot="title">
                                <Icon type="md-bookmarks" size="24" />
                                题库
                            </template>
                            <MenuItem name="2-1">Option 1</MenuItem>
                            <MenuItem name="2-2">Option 2</MenuItem>
                        </Submenu>
                        <Submenu name="3">
                            <template slot="title">
                                <Icon type="ios-keypad" size="24"></Icon>
                                出题
                            </template>
                            <MenuItem name="3-1"  @click.native="componentId='TeacherSetQues'">标准100分</MenuItem>
                            <MenuItem name="3-2" @click.native="componentId='ExcelExport'">Excel格式</MenuItem>
                        </Submenu>
                        <Submenu name="4">
                            <template slot="title">
                               <Icon custom="iconfont iconxueshengxinxibaobiao" size="20" />
                                班级学生
                            </template>
                            <MenuItem name="4-1" @click.native="componentId='teacherClassStudentsMsg'">班级学生信息</MenuItem>
                            <MenuItem name="4-2">Option 2</MenuItem>
                        </Submenu>
                    </Menu>
                </Sider>
                <Layout :style="{padding: '10px 10px 10px'}" class='bgc'>
                    <Content :style="{padding: '5px', minHeight: '420px', background: '#fff' } " >
                         <transition mode="out-in">
                             <component :is="componentId" v-if="teacherName" :teacherName='teacherName' :major='teacherInfo.major'></component>
                         </transition>
                    </Content>
                </Layout>
            </Layout>
        </Layout>
    </div>
</template>
<script>
import TeacherSettedquesPage from './studentAnsweredInfo/TeacherSettedquesPage.vue'
import StudentExamedData from './studentAnsweredInfo/studentExamedData.vue'
import StudentExamedMsg from './studentAnsweredInfo/studentExamedMsg.vue'
import TeacherSetQues from './TeacherSetQues.vue'
import ExcelExport from './ExcelExport.vue'
import teacherClassStudentsMsg from './teacherClassStudentsMsg.vue'


export default {
  components:{
      'TeacherSettedquesPage':TeacherSettedquesPage,
      'StudentExamedData':StudentExamedData,
      'StudentExamedMsg':StudentExamedMsg,
      'TeacherSetQues':TeacherSetQues,
      'ExcelExport':ExcelExport,
      'teacherClassStudentsMsg':teacherClassStudentsMsg 
  },
  data() {
    return {
        componentId:'TeacherSettedquesPage',
        teacherName:'',
        teacherInfo: []
    };
  },
  beforeMount() {
       this.getTeacherInfo();
  },
  methods: {
    getTeacherInfo() {
      const teachername = sessionStorage.getItem('teacherName');
      var teacherMsg = { teacherName: teachername };
      this.$axios({
        method: "post",
        url: "http://"+this.urlpath+"/FindOneT",
        data:teacherMsg 
      }).then(res => {
        this.teacherInfo=res.data;
        this.teacherName=res.data.teacherName

      });
    },
     loginout(){
         sessionStorage.setItem("studentName", '');
           this.$router.push('/')
     }
  
  }
};
</script>
<style scoped>
.layout{
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
}
.layout-logo p{
 font-size: 20px;
 color:aliceblue;
 font-family: "Microsoft YaHei";
 letter-spacing: 5px
}
.layout-nav{
    width: 100%;
    margin: 0 auto;
    margin-right: 0px;
}
.bgc{
  background-color: #fff;
  position: relative;
  height: 1000px;
  width: 800px;
}
    .v-enter,
    .v-leave-to {
      opacity: 0;
      transform: translateX(10px);
    }

    .v-enter-active,
    .v-leave-active {
      transition: all 0.2s ease;
    }
  .icon {
  width: 2em;
  height: 2em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

</style>